<template>
  <div class="Exercise">
    <img class="TopImg" :src="require('../assets/Exercise/6.jpg')" alt />
    <div class="coupon">
      <div class="couponItem">
        <p class="couponName">通用卷</p>
        <div>
          <span class="discountPrice">30</span>
          <span class="couponDetail">[满150可用]</span>
          <mt-button class="getCoupon" size="small">获取</mt-button>
        </div>
      </div>
      <div class="couponItem">
        <p class="couponName">通用卷</p>
        <div>
          <span class="discountPrice">150</span>
          <span class="couponDetail">[满1500可用]</span>
          <mt-button class="getCoupon" size="small">获取</mt-button>
        </div>
      </div>
    </div>
    <img class="advertise" :src="require('../assets/Exercise/10.jpg')" alt />
    <div class="discountShopList">
      <ul>
        <li>
          <img class="listImg" :src="require('../assets/Exercise/item1.jpg')" alt />
          <p class="itemTitle">轻奢水晶吊灯</p>
          <p class="itemDetail">描述</p>
          <p class="price">
            <span class="newPrice">￥7999</span>
            <span class="oldPrice">原价:12999 </span>
          </p>
        </li>
        <li>
          <img class="listImg" :src="require('../assets/Exercise/item1.jpg')" alt />
          <p class="itemTitle">轻奢水晶吊灯</p>
          <p class="itemDetail">描述</p>
          <p class="price">
            <span class="newPrice">￥79</span>
            <span class="oldPrice">原价:129 </span>
          </p>
        </li>
        <li></li>
      </ul>
         <mt-button class="getMore" >获取更多</mt-button>
    </div>
  </div>
</template>

<script>
import { Button } from "mint-ui";
export default {
  name: "Exercise",
  components: {
    Button
  }
};
</script>

<style lang="less">
.Exercise {
  width: 100%;
  padding-bottom: 2rem;
  background-color: #f4f4f4;
  .TopImg {
    width: 10rem;
  }
  .coupon {
    padding: 0rem 0.375rem;
    display: flex;
    margin-top: 0.375rem;
    div:first-child {
      margin-right: 0.2rem;
    }
    .couponItem {
      flex: 1;
      border: 1px solid red;
      height: 1.7rem;
      background-image: url("../assets/Exercise/coupon.jpg");
      background-size: cover;
      .couponName {
        padding-left: 0.15rem;
        font-size: 0.3rem;
        color: #606060;
      }
      div {
        padding-top: 0.35rem;
        .discountPrice {
          margin-left: 0.34rem;
          font-size: 0.55rem;
          color: #79716f;
          margin-right: 0.125rem;
          letter-spacing: -1px;
        }
        .couponDetail {
          color: #79716f;
          font-size: 0.25rem;
          margin-right: 0.125rem;
        }
        .getCoupon {
          float: right;
          height: 0.5rem;
          width: 1.2rem;
          margin-right: 0.2rem;
          margin-top: 0.1rem;
          font-size: 0.25rem;
          background-color: rgb(243, 52, 52);
          color: white;
        }
      }
    }
  }
  .advertise {
    width: 10rem;
    margin-top: 0.25rem;
  }
  .discountShopList {
    padding: 0rem 0.375rem;
    ul {
      
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      li:nth-child(2n-1) {
        margin-right: 0.25rem;
      }
      li {
        width: 4.5rem;
        margin-top: 0.25rem;
        background-color: white;
        border-radius: 10px;
        text-align: center;
        .listImg {
          width: 100%;
          height: 4.5rem;
          border-radius: 10px 10px 0 0;
        }
        .itemTitle {
          margin-top: 0.15rem;
          font-weight: 600;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .price {
          span{
             white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          }
          .newPrice {
            display: inline-block;
            color: red;
            font-size: 0.5rem;
            width: 2rem;
          }
          .oldPrice{
            text-decoration: line-through;
             display: inline-block;
              width: 2rem;
          }
        }
      }
    }
    .getMore{
      width: 100%;
      background-color: white;
    }
  }
}
</style>

